<template>
  <div class="map-theme">
    <div class="icon is-always-shadow" @click="visible = !visible">
      <svg-icon :icon-class="'画板'"></svg-icon>
    </div>
    <div class="theme-board is-always-shadow" v-show="visible">
      <div class="layer" v-for="layer in colorLayers" :key="layer.id">
        {{ layer.id }}：<input
          type="color"
          v-model="layer.paint['fill-extrusion-color']"
          @change="handleChangeColor"
        />
      </div>
      <div class="bottom">
        <el-button class="reset" size="small" @click="handleReset"
          >重置</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { hslToHex } from '@u/color.js'
export default {
  props: {
    layers: {
      type: Array,
      default: () => {
        return []
      },
    },
  },
  data() {
    return {
      colorLayers: [],
      visible: false,
    }
  },
  methods: {
    setColor() {
      const layers = this.layers.map((i) => {
        const color = i.paint['fill-extrusion-color']
        // const rgbaReg = new RegExp(/(rgba)|(RGBA)/);
        return {
          ...i,
          paint: {
            ...i.paint,
            'fill-extrusion-color': hslToHex(color),
          },
        }
      })
      this.colorLayers.splice(0, this.colorLayers.length, ...layers)
    },
    handleChangeColor() {
      this.$emit('changeColor', this.colorLayers)
    },
    handleReset() {
      this.$emit('reset')
    },
  },
  mounted() {
    this.setColor()
  },
  watch: {
    layers() {
      this.setColor()
    },
  },
}
</script>

<style lang="scss" scoped>
.map-theme {
  position: absolute;
  top: 110px;
  right: 10px;
  .icon {
    width: 30px;
    height: 30px;
    background: #fff;
    font-size: 30px;
    position: absolute;
    right: 5px;
    top: 9px;
    padding: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    cursor: pointer;
  }
  .theme-board {
    margin: 10px 45px 0px 0px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 5px;
    padding: 10px;
    input {
      height: 18px;
      width: 60px;
      border: none;
      background: none;
      padding: 0px;
      color: transparent;
      cursor: pointer;
    }
  }
  .reset {
    margin-top: 10px;
  }
}
.bottom {
  display: flex;
  justify-content: center;
}
</style>
